<script setup lang="ts">
    import { ref, reactive, toRefs, watch, computed,onMounted } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import moduleTitle from '@/components/moduleTit.vue';
    import * as echarts from 'echarts/core';
    import { TooltipComponent, LegendComponent } from 'echarts/components';
    import { PieChart } from 'echarts/charts';
    import { LabelLayout } from 'echarts/features';
    import { CanvasRenderer } from 'echarts/renderers';
    const router = useRouter();
    const route = useRoute();
    echarts.use([
        TooltipComponent,
        LegendComponent,
        PieChart,
        CanvasRenderer,
        LabelLayout
    ]);
    onMounted(()=>{
    var chartDom = document.getElementById('echarts-box');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
             show: false
        },
        series: [
            {
                silent: true,//禁止单击
                name: '总体办理情况',
                type: 'pie',
                radius: ['60%', '100%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                data: [
                    { value: 8, name: '总量' },
                    { value: 2, name: '已超期' },
                    { value: 5, name: '未到期' },
                    { value: 6, name: '已办结' },
                ],
                color: ['#3C86FF', '#F7A141', '#37D3F8', '#60E9C2'] // 修改为自定义颜色数组

            }
        ]
    };

    option && myChart.setOption(option);
})

    const jump = (path:string) => { 
        router.push(path);
    }

    // import HelloWorld from '@/components/HelloWorld.vue';
    // console.log('process',import.meta.env.VITE_API_BASE_URL);
    // let number = ref(0);
    // let arr = reactive([1,2,3]);
    // let json = reactive({
    //     name: '张三',
    //     age: 18
    // });
    // const change = ()=>{
    //     console.log('change')
    // };
</script>
<template >
    <div class="home">
        <div class="home-top">
            <div class="title-box">
                <div class="title">欢迎登录，惠阳信访系统</div>
                <div class="info">
                    <img src="@/assets/images/index_icon_user.png" alt="">
                </div>
            </div>
            <div class="info-txt">惠阳分局领导，张明月</div>
        </div>

        <div class="home-menu">
            <div class="menu-data d1" @click="jump('/todoWork')">
                <div class="menu-tit">
                    待办工作
                </div>
                <div class="data-num">
                    3
                </div>
            </div>
            <div class="menu-data d2">
                
                <div class="menu-tit"  @click="jump('/toDoWarning')">
                    预警工单
                </div>
                <div class="data-num">
                    3
                </div>

            </div>
        </div>

        <div class="data-board">
            <div class="board-title">
                数据看板
            </div>
            <div class="board-info">
                可视化分析，快速掌握信访工作动态
            </div>
            <div class="board-btn">
                立即查看
            </div>
        </div>

        <div class="module-box">
            <div class="handling-status box-content">
                <div class="tit">
                     <moduleTitle tit="总体办理情况" />
                </div>

                <div class="handling-status-box">
                    <div class="echarts-con">
                        <div class="echarts-data">
                            <div class="data-num">
                                76%
                            </div>
                            <div class="data-tit">
                                办结率
                            </div>
                        </div>
                        <div id="echarts-box"></div>
                    </div>

                    <div class="data-box">
                        <div class="data-item">
                            <div class="data-item-top">
                                 <div class="tips c1"></div>
                                 <div class="data-name">总量</div>
                            </div>
                            <div class="data-num">8</div>
                        </div>
                        <div class="data-item">
                            <div class="data-item-top">
                                 <div class="tips c2"></div>
                                 <div class="data-name">已超期</div>
                            </div>
                            <div class="data-num">8</div>
                        </div>
                        <div class="data-item">
                            <div class="data-item-top">
                                 <div class="tips c3"></div>
                                 <div class="data-name">未到期</div>
                            </div>
                            <div class="data-num">8</div>
                        </div>
                        <div class="data-item">
                            <div class="data-item-top">
                                 <div class="tips c4"></div>
                                 <div class="data-name">已办结</div>
                            </div>
                            <div class="data-num">8</div>
                        </div>

                    </div>
                </div>
               
            </div>

            <div class="handling-status box-content"> 
                 <div class="tit">
                     <moduleTitle tit="常用服务" />
                </div>

                <div class="common-services">
                    <div class="common-services-item service1" @click="jump('/caseInquiry')">
                        <div class="name">案件查询</div>
                    </div>
                    <div class="common-services-item service2">
                        <div class="name">报告查询</div>
                    </div>
                </div>

            </div>
        </div>


    </div>
    <!-- <HelloWorld msg="首页的组件" @helloChange="change" /> -->
</template>

<style lang="less" scoped>
   .home{
    min-height: 100vh;
    background-color: #f5f5f5;
    background-image: url("@/assets/images/index_bg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: -110px;
    font-family: PingFang SC;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .home-top{
        padding: 0px 66px 0px 72px;
        .title-box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 72px;
            .title{
                font-size: 70px;
                color: #000;
                
                font-weight: 800;
            }
            .info{
                width: 90px;
                height: 90px;
                img{
                     width: 90px;
                height: 90px;
                }
            }
        }
        .info-txt{
            font-size: 42px;
            color: #000000;
            font-weight: 800;
            margin-top: 36px;
            line-height: 43px;
        }
    }

    .home-menu{
        display: flex;
        justify-content: space-between;
        padding:0px 48px;
        margin-top: 75px;
        .menu-data{
            width:534px;
            height:236px;
            background-repeat: no-repeat;
            background-size: contain;
            box-sizing: border-box;
            padding-top: 47px;
            .menu-tit{
                font-size: 54px;
                text-shadow: 0px 4px 9px rgba(35,80,148,0.38);
                color: #FFFFFF;
                line-height: 54px;
            }
            .data-num{
                font-size: 68px;
                color: #FFFFFF;
                text-shadow: 0px 4px 9px rgba(35,80,148,0.38);
                  line-height: 68px;
                  margin-top: 35px;
                  padding-left: 10px;
            }
        }
        .d1{
            background-image: url("@/assets/images/index_bg_dbgz.png");
            padding-left: 52px;
        }
        .d2{
            background-image: url("@/assets/images/index_bg_yjgd.png");
            padding-left: 58px;
        }
    }

    .data-board{
        width: 1145px;
        height: 423px;
        background: url("@/assets/images/index_sjkb_bg.png");
        background-size: contain;
        margin: 0px auto;
        margin-top: 29px;
        margin-bottom: 19px;
        color: #2B2E30;
        font-weight: bold;
        box-sizing: border-box;
        padding-left: 78px;
        padding-top: 100px;
        .board-title{
            font-size: 56px;
            line-height: 56px;
        
        }
        .board-info{
          line-height: 36px;
            font-size: 36px;
            margin-top: 32px;
            margin-bottom: 34px;
        }
        .board-btn{
            width: 226px;
            height: 76px;
            background: linear-gradient(90deg, #3da5ff, #4268FF);
            border-radius: 38px;
            font-size: 38px;
            color: #FFFFFF;
            text-align: center;
            line-height: 76px;
       }
    }

    .module-box{
        width: 1083px;
        margin: 0px auto;
        .box-content{
            box-shadow: 0px 8px 21px 3px rgba(45,75,121,0.09);
            border-radius: 40px;
            background: #FFFFFF;
            padding-top: 46px;
            padding-bottom: 31px;
            margin-bottom: 50px;
            .tit{
                padding-left: 16px;
            }

            .handling-status-box{
                padding-top: 97px;
                padding-left: 74px;
                padding-bottom: 56px;
                display: flex;
                justify-content: space-between;
                .echarts-con{
                     width: 398px;
                    height: 400px;
                    position: relative;
                    .echarts-data{
                        position: absolute;
                        top:50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        text-align: center;
                        .data-num{
                            font-size: 70px;
                            color: #191919;
                            font-weight: bold;
                            height: 53px;
                            font-family: Arial;
                            margin-bottom: 39px;
                        }
                        .data-tit{
                            font-size: 42px;
                            font-weight: bold;
                            color: #4C5773;
                            height: 40px;
                        }
                    }
                }
                #echarts-box{
                    width: 398px;
                    height: 400px;
                }

                .data-box{
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    flex: 1;
                    margin-left: 83px;
                    padding-top: 63px;
                    .data-item{
                        margin-right: 70px;
                        width: 192px;
                        .data-item-top{
                            display: flex;
                            align-items: center;
                            margin-bottom: 28px;
                            .tips{
                                width: 28px;
                                height: 28px;
                                border-radius: 50%;
                                margin-right: 18px;
                            }
                            .c1{
                                background: #3C86FF;
                            }
                            .c2{
                                background: #F7A141;
                            }
                            .c3{
                                background: #37D3F8;
                            }
                            .c4{
                                background: #60E9C2;
                            }
                            .data-name{
                                font-size: 46px;
                                color: #333333;
                                
                            }
                        }
                        .data-num{
                            text-indent: 46px;
                            font-size: 54px;
                            color: #191919;
                            font-weight: bold;
                        }
                    }
                }
            }

            .common-services{
                padding: 0px 30px;
                display: flex;
                justify-content: space-between;
                .common-services-item{
                    width: 497px;
                    height: 207px;
                    background-repeat: no-repeat;
                    background-size: 100%;
                    box-sizing: border-box;
                    padding-left: 48px;
                    display: flex;
                    align-items: center;
                    margin-top: 55px;
                    .name{
                        color: #333333;
                        font-weight: bold;
                        font-size: 46px;
                    }
                }
                .service1{
                    background-image: url("@/assets/images/index_icon_ajcx.png");
                }
                .service2{
                    background-image: url("@/assets/images/index_icon_bgcx.png");
                }
            }
        }
    }
   }
</style>